<?php

use home\assets\PageAsset;

/* @var $this yii\web\View */
/* @var $model \home\models\Products */

$this->title = 'Biffar Product - ' . $model->name;
$this->params['breadcrumbs'][] = ['label' => 'Biffar产品', 'url' => ['product/index']];
$this->params['breadcrumbs'][] = ['label' => $model->category->name, 'url' => ['product/index', 'category_id' => $model->category_id]];
$this->params['breadcrumbs'][] = $model->name;

PageAsset::register($this)->init([
    'css' => [
        'css/product.css',
    ],
]);
?>

<div class="page-body">
    <div class="product-view clearfix">
        <div class="container">
            <div class="gallery-nav">
                <a class="nav-button nav-up" href="javascript:;"><span class="iconfont icon-up"></span></a>
                <div class="gallery-list">
                    <ul>
                        <li><img src="<?= $model->getPreviewUrl(80, 80) ?>" data-src="<?= $model->getPreviewUrl(500, 500, false) ?>" /></li>
                    </ul>
                </div>
                <a class="nav-button nav-down" href="javascript:;"><span class="iconfont icon-down"></span></a>
            </div>

            <div class="product-image">
                <img src="<?= $model->getPreviewUrl(500, 500, false) ?>" />
            </div>

            <div class="product-detail">
                <h1><?= $model->name ?></h1>
                <h3><?= $model->category->name ?></h3>

                <?php foreach($model->getAttrGroup() as $group => $name){ ?>
                <?php if(!empty($model->$group)){ ?>
                <dl class="select-attr">
                    <dt><?= $name ?>：</dt>
                    <dd>
                        <?php foreach($model->$group as $attr_id){ ?>
                            <a class="cart-attr" href="javascript:;"><?= $model->showAttrName($attr_id, $group) ?></a>
                        <?php } ?>
                        <input type="hidden" name="Cart[<?= $group ?>]" value="" />
                    </dd>
                </dl>
                <?php } ?>
                <?php } ?>
            </div>
        </div>
    </div>

    <?php if($model->cases){ ?>
    <div class="relation-area">
        <div class="container">
            <div class="relation-title">
                <h1>Case</h1>
                <h3>相关案例</h3>
            </div>

            <div class="relation-box">
                <a class="relation-button relation-left"><span class="iconfont icon-left"></span></a>
                <div class="relation-list">
                    <ul>
                        <?php foreach($model->cases as $case){ ?>
                        <li><a href="<?= $case->getViewUrl() ?>"><img src="<?= $case->getPreviewUrl(264, 170) ?>" /></a></li>
                        <?php } ?>
                    </ul>
                </div>
                <a class="relation-button relation-right"><span class="iconfont icon-right"></span></a>
            </div>
        </div>
    </div>
    <?php } ?>
</div>

<?php

$js = <<<JS

$('.cart-attr').click(function(){
    $(this).parent().find('.cart-attr').removeClass('active');
    $(this).addClass('active');
    $(this).closest('.select-attr').find('input').val($(this).text());
});

JS;

$this->registerJs($js);